/**
 * Created by bgy on 2016/12/6.
 * 我的水果
 */
import React from 'react';
import {Link} from 'react-router';

class GoodsDetailComponent extends React.Component {

  constructor() {
    super();
    this.handleChange = this.handleChange.bind(this);
    this.state = {
      canEdit:'readOnly',
      //测试数据
      goodsName: '',
      itemSpec: '',
      packing: '',
      salePrice: '',
      supplyQty: '',
      supplyTime: '',
      supplyArea: '',
      shipAddr: '',
      expressType: '',
      remark: '',
      qualityCode: '',
    }

  }
  componentWillReceiveProps() {
    console.info(this.props['data-edit']);
    if(this.props['data-goodsId']){
      $.ajax(
        {
          'url':'http://192.168.2.17:8080/trade/goods/queryGoodsDetail',
          contentType: 'application/json',
          type: 'post',
          dataType: 'JSON',
          data: JSON.stringify({
            'goodsId': this.props['data-goodsId'],
            'vendorId':'10001'
          }),
          success: function (data) {
            if (data.errorCode == 0) {
              this.setState({
                goodsName: data.data.goodsName,
                itemSpec: data.data.itemSpec,
                packing: data.data.packing,
                salePrice: data.data.salePrice,
                supplyQty: data.data.supplyQty,
                supplyTime: data.data.supplyTime,
                supplyArea: data.data.supplyArea,
                shipAddr: data.data.shipAddr,
                expressType: data.data.expressType,
                remark: data.data.remark,
                qualityCode: data.data.qualityCode,
                canEdit:this.props['data-edit']?'':'readOnly'
              });
            }
          }.bind(this),
          error: function (data) {
            return data;
          }
        }
      );
    }

  }
  handleSubmit(){
    console.info('submit');
  }
  handleChange(e){
    console.info('handleChange');
    this.setState({
      goodsName:this.refs.goodsName?this.refs.goodsName.value:'',
      itemSpec:this.refs.itemSpec?this.refs.itemSpec.value:'',
      packing:this.refs.packing?this.refs.packing.value:'',
      salePrice:this.refs.salePrice?this.refs.salePrice.value:'',
      supplyQty:this.refs.supplyQty?this.refs.supplyQty.value:'',
      supplyTime:this.refs.supplyTime?this.refs.supplyTime.value:'',
      supplyArea:this.refs.supplyArea?this.refs.supplyArea.value:'',
      shipAddr:this.refs.shipAddr?this.refs.shipAddr.value:'',
      expressType:this.refs.expressType?this.refs.expressType.value:'',
      remark:this.refs.remark?this.refs.remark.value:'',
      qualityCode:this.refs.qualityCode?this.refs.qualityCode.value:''
    });
  }
  handleForm(){
    $.ajax(
      {
        'url':'http://192.168.2.17:8080/trade/goods/modifyGoods',
        contentType: 'application/json',
        type: 'post',
        dataType: 'JSON',
        data: JSON.stringify({
          'goodsId': this.props['data-goodsId'],
          'vendorId':'10001',
          'goodsName':this.state.goodsName,
          'itemSpec':this.state.itemSpec,
          'packing':this.state.packing,
          'salePrice':this.state.salePrice,
          'supplyQty':this.state.supplyQty,
          'supplyTime':this.state.supplyTime,
          'supplyArea':this.state.supplyArea,
          'shipAddr':this.state.shipAddr,
          'expressType':this.state.expressType,
          'remark':this.state.remark,
          'qualityCode':this.state.qualityCode
        }),
        success: function (data) { console.info(data);
          if (data.errorCode == 0) {
            this.props.gobackFruit()
          }
        }.bind(this),
        error: function (data) {
          return data;
        }
      }
    );
  }
  render() {
    return (
    <div style={{'paddingBottom':'6.3rem'}}>
      <div className='edit-form'>
        <div className='edit-item'>
          <label>
            <span className="label-lt">品类-名称</span>
            <span className="label-rt"><input className='input-item' type="text" ref='goodsName' value={this.state.goodsName} onChange={this.handleChange} readOnly={''+this.state.canEdit} /></span>
          </label>
        </div>
        <div className='edit-item'>
          <label>
            <span className="label-lt">规格</span>
            <span className="label-rt"><input className='input-item' type="text"  ref='itemSpec' value={this.state.itemSpec} onChange={this.handleChange} readOnly={''+this.state.canEdit}/></span>
          </label>
        </div>
        <div className='edit-item'>
          <label>
            <span className="label-lt">包装</span>
            <span className="label-rt"><input className='input-item' type="text"  ref='packing' value={this.state.packing} onChange={this.handleChange} readOnly={''+this.state.canEdit}/></span>
          </label>
        </div>
        <div className='edit-item'>
          <label>
            <span className="label-lt">单价</span>
            <span className="label-rt"><input className='input-item' type="text" ref='salePrice'  value={this.state.salePrice} onChange={this.handleChange} readOnly={''+this.state.canEdit}/></span>
          </label>
        </div>
      </div>
      <div className='edit-form'>
        <div className='edit-item'>
          <label>
            <span className="label-lt">供应量</span>
            <span className="label-rt"><input className='input-item' type="text"  ref='supplyQty' value={this.state.supplyQty} onChange={this.handleChange} readOnly={''+this.state.canEdit}/></span>
          </label>
        </div>
        <div className='edit-item'>
          <label>
            <span className="label-lt">供货时间</span>
            <span className="label-rt"><input className='input-item' type="text"  ref='supplyTime' value={this.state.supplyTime} onChange={this.handleChange} readOnly={''+this.state.canEdit}/></span>
          </label>
        </div>
        <div className='edit-item'>
          <label>
            <span className="label-lt">供应地区</span>
            <span className="label-rt"><input className='input-item' type="text"  ref='supplyArea' value={this.state.supplyArea} onChange={this.handleChange} readOnly={''+this.state.canEdit} /></span>
          </label>
        </div>
        <div className='edit-item'>
          <label>
            <span className="label-lt">发货地址</span>
            <span className="label-rt"><input className='input-item' type="text"  ref='shipAddr' value={this.state.shipAddr} onChange={this.handleChange} readOnly={''+this.state.canEdit} /></span>
          </label>
        </div>
        <div className='edit-item'>
          <label>
            <span className="label-lt">物流方式</span>
            <span className="label-rt"><input className='input-item' type="text"  ref='expressType' value={this.state.expressType} onChange={this.handleChange} readOnly={''+this.state.canEdit} /></span>
          </label>
        </div>
        <div className='edit-item'>
          <label>
            <span className="label-lt">果品描述</span>
            <span className="label-rt"><input className='input-item' type="text"  ref='remark' value={this.state.remark} onChange={this.handleChange} readOnly={''+this.state.canEdit}/></span>
          </label>
        </div>
        <div className='edit-item' style={{'display':this.state.qualityCode?'block':'none'}}>
          <label>
            <span className="label-lt">质检编号</span>
            <span className="label-rt"><input className='input-item' type="text"  ref='qualityCode' value={this.state.qualityCode} onChange={this.handleChange} readOnly={''+this.state.canEdit} /></span>
          </label>
        </div>
        <div className='edit-item'>
          <label>
            <span className="label-lt">图片说明</span>
            <span className="label-rt"><input className='input-item' type="text"  ref='salePrice' value={this.state.salePrice} onChange={this.handleChange} readOnly={''+this.state.canEdit}/></span>
          </label>
        </div>
      </div>

      <button className="button button-pill button-primary btn-green btn-long" onClick={this.handleForm.bind(this)}>确认发布</button>
    </div>
    )
  }

}

export default GoodsDetailComponent;
